<template>
  <div class="banner" :style="{
    backgroundColor: config.pageConfig.bgcolor,
  }">
    <div v-for="(item, index) in config.pageConfig.tabList" :key="index">
      <div>
        <img v-if='config.pageConfig.type != 3 && item.custom == true && config.pageConfig.currentIndex == index'
          :src="item.imageUrl" alt="">
        <img v-else-if='config.pageConfig.type != 3 && item.custom == true && config.pageConfig.currentIndex != index'
          :src="item.unImgUrl" alt="">
        <span v-else-if="config.pageConfig.type != 3" class="iconfont" :class="'icon-' + item.iconUrl" :style="{
          color: config.pageConfig.currentIndex == index ? config.pageConfig.selectcolor : config.pageConfig.unselectcolor,
        }"></span>
      </div>
      <p v-if="config.pageConfig.type != 2" :style="{
        color: config.pageConfig.currentIndex == index ? config.pageConfig.selectcolor : config.pageConfig.unselectcolor,
      }">{{ item.title }}</p>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "Footbar",
};
</script>
<script lang="ts" setup>
import { reactive, onMounted } from "vue";
const config = defineProps({
  pageConfig: {
    type: Object,
    default: {
      currentIndex: 0,
      type: 1,
      bgcolor: "#fff",
      unselectcolor: "#3d404d",
      selectcolor: "#4adfcf",
      tabList: [
        {
          title: "首页",
          custom: true,
          iconUrl: "home",
          imageUrl: './imagesStatic/1661756860000Fhe8Icon-shouye-xuanhzong.png',
          unImgUrl: './imagesStatic/1661756963000APA3Icon-shouye.png',
          keyword: "Home",
          linkType:2
        },
        {
          title: "分类",
          custom: true,
          iconUrl: "fenlei",
          imageUrl: './imagesStatic/1661757055000dwYnicon-fenlei-xuanhzong.png',
          unImgUrl: './imagesStatic/16617571070006Pz8icon-fenlei.png',
          keyword: "Classify",
          linkType:2
        },
        {
          title: "购物车",
          custom: true,
          iconUrl: "shop-car",
          imageUrl: './imagesStatic/1658732706000.png',
          unImgUrl: './imagesStatic/1658732741000.png',
          keyword: "Shopcar",
          linkType:2
        },
        {
          title: "个人中心",
          custom: true,
          iconUrl: "icon03",
          imageUrl: './imagesStatic/1661757148000rAZZIcon-xuanhzong-wode.png',
          unImgUrl: './imagesStatic/1661757173000SAK7Icon-wode.png',
          keyword: "Person",
          linkType:2
        },
      ],
    },
  },
});
let emits = defineEmits<{ (e: "close", flag: boolean): void }>();
</script>
<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  div {
    flex: 1;

    img {
      display: block;
      margin: 0 auto;
      width: 20px;
      height: 20px;
    }

    .iconfont {
      display: block;
      width: 100%;
      font-size: 24px;
      text-align: center;
    }

    p {
      font-size: 12px;
      text-align: center;
      line-height: 30px;
    }
  }
}
</style>
